import 'package:connectfour/datas.dart';
import 'package:connectfour/game_page.dart';
import 'package:flutter/material.dart';

class RecordPage extends StatefulWidget {
  const RecordPage({super.key, this.light = false});
  final bool light;

  @override
  State<RecordPage> createState() => _RecordPageState();
}

class _RecordPageState extends State<RecordPage> {
  @override
  Widget build(BuildContext context) {
    double scrW = MediaQuery.of(context).size.width;
    double scrH = MediaQuery.of(context).size.height;

    Widget RecordItem(RecordInformation recordInfo, {bool lighting = false}) {
      return InkWell(
        onTap: () {},
        child: Container(
          padding: EdgeInsets.symmetric(
            vertical: 10,
          ),
          color: lighting ? Colors.yellowAccent : Colors.grey[200],
          child: Container(
            width: 550,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: 550 / 4 - 40,
                  child: Center(child: Text(recordInfo.datetime)),
                ),
                Container(
                    width: 550 / 4 - 40,
                    child: Center(child: Text(recordInfo.redPlayer))),
                Container(
                    width: 550 / 4 - 40,
                    child: Center(child: Text(recordInfo.yellowPlayer))),
                Container(
                  width: 550 / 4 - 40,
                  child: Center(child: Text(recordInfo.winner)),
                ),
              ],
            ),
          ),
        ),
      );
    }

    return Scaffold(
      appBar: AppBar(
        leadingWidth: 100,
        centerTitle: true,
        leading: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => GamePage(),
              ),
            );
          },
          child: Center(
            child: Container(
              padding: EdgeInsets.only(left: 20),
              child: Text(
                'back',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
        title: Text('Records'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 120),
        child: Container(
          height: 500,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            color: Colors.grey[200],
          ),
          child: Padding(
            padding: EdgeInsets.symmetric(
                horizontal: (scrW - 240 - 550) / 2, vertical: 20),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      'Datetime',
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 20),
                      width: 1,
                      height: 18,
                      color: Colors.black,
                    ),
                    const Text(
                      'Red Player',
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 20),
                      width: 1,
                      height: 18,
                      color: Colors.black,
                    ),
                    const Text(
                      'yellow Player',
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 20),
                      width: 1,
                      height: 18,
                      color: Colors.black,
                    ),
                    const Text(
                      'Winner',
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
                Expanded(
                    child: ListView.builder(
                  itemCount: recordsList.length,
                  itemBuilder: (BuildContext context, int index) {
                    RecordInformation recordInfo =
                        recordsList[recordsList.length - index - 1];
                    if (index == 0 && widget.light == true) {
                      return RecordItem(recordInfo, lighting: true);
                    }
                    return RecordItem(recordInfo);
                  },
                )),
                // Column(
                //   children: recordColumn,
                // ),
                // GestureDetector(
                //   onTap: () {
                //     print(recordColumn[0]);
                //     setState(() {});
                //   },
                //   child: Container(
                //     width: 200,
                //     height: 200,
                //     color: Colors.pink[100],
                //   ),
                // )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
